<template>
	<view style="background-color: #F5F3F4;">	
	<view style="display: flex;flex-direction: row;">
		<view class="title1" style="display: flex;flex-direction: column;width: 50%;">
		    <view style="margin: 45rpx;display: flex;flex-direction: column;font-weight: bold;">闲看青叶落灯花</view>
		    <view style="margin: 45rpx;display: flex;flex-direction: column">我的积分：2</view>
		</view>
		<view class="title2" style="display: flex;flex-direction: column;width: 50%;">
		    <view style="display: flex;justify-content: center;align-items: center;margin: 20rpx;">
			<image src="../../static/我的/头像.png" mode="" class="image_size" style="display: flex;flex-direction: column;"></image>
		    </view>
		    <view style="margin: 20rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
			vip
			</view>
		</view>
	</view>
		<view class="content1">
			<view>
				<image src="../../static/电话.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
	             电话：11122233344
				</view>
			<view>更新</view>
		</view>
		<view class="content2">
			<view>
				<image src="../../static/我的/QQ截图20240109132704.png" mode="" class="image_size1"></image>
				我的考试
			</view>
			<view>
				<image src="../../static/我的/我的笔记.png" mode="" class="image_size1"></image>
				我的笔记
			</view>
			<view>
				<image src="../../static/我的/我的勋章.png" mode="" class="image_size1"></image>
				我的勋章
			</view>
			<view>
				<image src="../../static/我的/我的设置.png" mode="" class="image_size1"></image>
				偏好设置
			</view>
		</view>
			
		<view class="content3">
			<view>
				<image src="../../static/我的/我的会员.png" class="image_size2"></image>
				我的会员
			</view>
			<view>
				<image src="../../static/我的/激活通道.png" class="image_size2"></image>
				激活码
			</view>
			<view>
				<image src="../../static/我的/积分商城.png" class="image_size2"></image>
				积分商城
			</view>
		    <view>
				<image src="../../static/我的/分享有礼.png" class="image_size2"></image>
				分享有礼
			</view>
		</view>
		<view class="content4">
			<view>
				<image src="../../static/我的/关于我们.png" class="image_size3"></image>
				关于我们
			</view>
			<view>
				<image src="../../static/我的/个人设置.png" class="image_size3"></image>
				个人设置
			</view>
			<view>
				<image src="../../static/我的/安全设置.png" class="image_size3"></image>
				安全设置
			</view>
			<view>
				<image src="../../static/我的/登出.png" class="image_size3" @click="logout"></image>
				登出
			</view>
		</view>
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			logout() {
				uni.removeStorageSync('userName');
				uni.removeStorageSync('userAvatar');
				uni.setStorageSync('userName','立即登录')
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		}
	}
</script>

<style>
	
	.image_size{
		height: 50px;
		width: 50px;
	}
	.content1{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border: 2rpx solid #90A672;
		padding: 20rpx;
	}
	.content2{
		display: flex;
		flex-direction: row;
		border: 2rpx solid #90A672;
		flex-wrap: wrap;
		justify-content: space-around;
		height: 200rpx;
		padding: 40rpx,40rpx;
	}
	.content2>view{
		height: 100rpx;
		width: 90rpx;
		flex-basis: 22%;
	}
	.content2>view:nth-child(1){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content2>view:nth-child(2){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content2>view:nth-child(3){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content2>view:nth-child(4){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.image_size1{
		height: 60rpx;
		width: 60rpx;
	}
	.content3{
		display: flex;
		flex-direction: row;
		border: 2rpx solid #90A672;
		flex-wrap: wrap;
		justify-content: space-around;
		height: 200rpx;
		padding: 40rpx,40rpx;
	}
	.content3>view{
		height: 100rpx;
		width: 90rpx;
		flex-basis: 22%;
	}
	.content3>view:nth-child(1){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content3>view:nth-child(2){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content3>view:nth-child(3){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content3>view:nth-child(4){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.image_size2{
		height: 60rpx;
		width: 60rpx;
		border: 2rpx;
	}
	.content4{
		display: flex;
		flex-direction: row;
		border: 2rpx solid #90A672;
		flex-wrap: wrap;
		justify-content: space-around;
		height: 200rpx;
		padding: 40rpx,40rpx;
	}
	.content4>view{
		height: 100rpx;
		width: 90rpx;
		flex-basis: 22%;
	}
	.content4>view:nth-child(1){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content4>view:nth-child(2){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content4>view:nth-child(3){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	.content4>view:nth-child(4){
		justify-content: center;
		align-items:center;
		display: flex;
		font-size: 0.7rem;
		height: 180rpx;
		flex-direction: column;
	}
	
	.image_size3{
		height: 60rpx;
		width: 60rpx;
		border: 2rpx;
	}
</style>
